<template>

  <!-- 
    上拉加载 (准备工作)
       1:配制:onReachBottomDistance:值，距离 底部多远时触发一个事件
       2:触发的事件
          onReachBottom(){
            ...上拉加载处理
          }
    上拉加载需要做什么
       1：加载过程中加入loading(加载 前出现loading)
       2:页码要++
       3：o数据要累加
       4：判断是否全部加载完成，如果全部完成，再触发加载事件时要return
       5:让loading消失
       
    下拉刷新（准备工作）
      1：配制:enablePullDownRefresh:true
      2:onPullDownRefresh:下拉 刷新时执行的回调方法
      3：uni.stopPullDownRefresh() 停止下拉刷新动作
    下拉 刷新
        1：所有变量还原成初始值
        2：重新发起请求
       
   -->

  <view class="list">
    <my-goods @click.native="goDetail(item.goods_id)" v-for="item in list" :key="item.goods_id" :item="item"></my-goods>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        key: '',
        list: [],
        page: 1,
        finished: false
      };
    },
    onLoad({
      key
    }) {
      this.key = key
      this.getData()
    },
    async onReachBottom() {
      if (this.finished) {
        return uni.showToast({
          title: "已加载完了!"
        })
      }
      uni.showLoading({
        title: "加载中",
        mask: true
      })
      // 页码++
      this.page++
      await this.getData()
      uni.hideLoading()
      console.log('onReachBottom');
    },
    async onPullDownRefresh() {
      console.log('onPullDownRefresh');
      this.list = []
      this.page = 1
      this.finished = false
      // 调用接口完成后执行停止下拉刷新
      await this.getData()
      uni.stopPullDownRefresh()

    },
    methods: {
      async getData() {
        const res = await uni.http.get('/goods/search', {
          params: {
            query: this.key,
            pagenum: this.page,
            pagesize: 10
          }
        })
        this.list.push(...res.message.goods)
        if (this.list.length >= res.message.total) {
          this.finished = true
        }
        console.log('列表', res);
      },
      // 跳转到详情
      goDetail(id) {
        uni.navigateTo({
          url: "/pages/goods_detail/main?goods_id=" + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {}
</style>